import { Button, Card, Form, Input } from 'antd'
import React from 'react'
import { connect, useHistory } from 'umi';
import './login.less'
function Login(props:any) {
  const history = useHistory()
  const onFinish = (values: any) => {
    // console.log('Success:', values);
    fetch("/admin/base/open/login", {
      method: "POST",
      body: JSON.stringify(values),
      headers: {
        "Content-Type": "application/json"
      }
    }).then(res => res.json()).then(res => {
      // console.log(res)
      props.dispatch({
        type:'example/setUserInfo',
        payload:res.data
      })
      history.push('/home/activityManage')
    })
  };

  const onFinishFailed = (errorInfo: any) => {
    // console.log('Failed:', errorInfo);
  };
  return (
    <div className='login'>
      <Card style={{ width: 300 }}>
        <h2 className='title'>活动管理平台</h2>
        <br></br>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码！' }]}
          >
            <Input.Password />
          </Form.Item>
          <div className='login-btn'>
            <Button type="primary" htmlType='submit'>登录</Button>
          </div>
        </Form>
      </Card>
    </div>
  )
}

export default connect()(Login)